<template>
	<view>
		<view class="header-index-view">
			<view class="fontSize-18 color-fff text-center" style="margin-top: 100rpx;">任务大厅</view>
			<view class="flex-alignItems-center margin-top50">
				<view class="flex1 flex-justAliCenter-column" v-for="(item,index) in list" :key="index"
				@click="chooseTabs(index)">
					<view class="fontSize-16 color-fff margin-bottom10">{{item.name}}</view>
					<view class="header-icon" v-if="tabIndex == index"></view>
					<view style="height: 8rpx;" v-else></view>
				</view>
			</view>
		</view>
		<view class="padding-30">
			<view class="bg-fff padding-30 border-radius20 margin-bottom20"
			@click="$tools.navigateTo('/pages/index/index-info')">
				<view class="flex-between f-divider1 padding-bottom30 margin-bottom30">
					<view class="fontSize-20 color-000 fontWeight-bold">#0001</view>
					<view class="flex-alignItems-center">
						<view class="fontSize-15 margin-right20" style="color: #2A9C37;">40分钟内</view>
						<view class="fontSize-15 color-000">  送达</view>
					</view>
				</view>
				<view class="flex-alignItems-center margin-bottom20">
					<view class="qu-icon flex-center">取</view>
					<view class="margin-left20">
						<view class="fontSize-20 color-000 fontWeight-bold margin-bottom10">手撕鸡</view>
						<view class="fontSize-15 color-000">高新区金梭路33号 正弘汇数码城</view>
					</view>
				</view>
				<view class="flex-alignItems-center">
					<view class="qu-icon1 flex-center">送</view>
					<view class="margin-left20">
						<view class="fontSize-20 color-000 fontWeight-bold margin-bottom10">张女士</view>
						<view class="fontSize-15 color-000">高新区金梭路33号 正弘汇数码城</view>
					</view>
				</view>
				<view class="t-price flex-center margin-30-0">
					配送费 ￥5.00
				</view>
				<view class="fontSize-15 color-000 margin-bottom30">
					备注     这里是订单的备注内容
				</view>
				<view class="index-list-btn flex-center">
					抢单
				</view>
				<!-- <view class="flex-center">
					<view class="left-btn flex-center">
						<image class="img-32 margin-right20" src="../../static/images/01.png" mode=""></image>
						<view class="fontSize-15 color-000">致电商家</view>
					</view>
					<view class="right-btn flex-center">已取餐</view>
				</view>
				<view class="flex-center">
					<view class="left-btn flex-center">
						<image class="img-32 margin-right20" src="../../static/images/01.png" mode=""></image>
						<view class="fontSize-15 color-000">致电客户</view>
					</view>
					<view class="right-btn flex-center">已送达</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name:'接任务',status:0},
					{name:'待取货(10)',status:0},
					{name:'配送中(10)',status:0}
				],
				tabIndex:0
				
			}
		},
		onLoad() {

		},
		methods: {
			chooseTabs(index){
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right-btn{
		flex: 1;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2A9C37;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.left-btn{
		flex: 1;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		height: 80rpx;
		background: #EFEEF1;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.index-list-btn{
		// width: 670rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		height: 80rpx;
		background: #2A9C37;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
	.t-price{
		width: 200rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #2A9C37;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #2A9C37;
	}
	.qu-icon1{
		background-color: #F8A220;
		color: #FFFFFF;
		width: 60rpx;
		height: 60rpx;
		font-size: 16px;
		font-weight: bold;
		border-radius: 50%;
	}
	.qu-icon{
		background-color: #2A9C37;
		color: #FFFFFF;
		width: 60rpx;
		height: 60rpx;
		font-size: 16px;
		font-weight: bold;
		border-radius: 50%;
	}
	.header-icon{
		width: 32rpx;
		height: 8rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.header-index-view{
		width: 100%;
		height: 300rpx;
		background-color: #2A9C37;
		overflow: hidden;
	}
</style>
